<template>
    <div class="about">
        <a-button style="float:right" type="primary">返回</a-button>
        <h1>
            正则表达式
        </h1>

        <a-card title="正则语法">
            <a slot="extra">示例代码node环境运行</a>
            <div class="left" style="float:left">
                <a-card title="①单选题:关于正则表达式，下列说法正确的是：">
                    <ul>
                        <li>A &#12288; \w用来匹配数字</li>
                        <li>B &#12288; /a?/表示匹配0到多个a</li>
                        <li>C &#12288; i修饰符表示忽略大小写</li>
                        <li>D &#12288; #1表示对第一个捕获组的引用</li>
                    </ul>
                    <br />
                    <a-card-meta title="答案：C" description=""></a-card-meta>
                    <br />
                    <a-card-meta title="解析" description=""></a-card-meta>
                    <br />
                    <strong>①<em>\w</em> 匹配字母数字或下划线；</strong> <br />
                    <strong>② <em>?</em> 匹配0个或1个；</strong> <br />
                    <strong>③ <em>\1</em> 表示对第一个捕获组的引用；</strong>
                    <br />
                    <strong>④ <em>i</em> 忽略大小写</strong>
                </a-card>
                <br />
                <br />
            </div>
            <div class="right" style="float:right">
                <h3>经典图解：</h3>
                <img
                    src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=5bf5bcfaf21f3a294ec5dd9cf84cd754/42a98226cffc1e175d2391154890f603738de972.jpg"
                    alt=""
                    srcset=""
                />
                <textarea cols="60" rows="10">
                （英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。
                许多程序设计语言都支持利用正则表达式进行字符串操作。
                例如，在Perl中就内建了一个功能强大的正则表达式引擎。
                正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。
                正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。 </textarea
                >
            </div>
        </a-card>
        <br />
        <a-card-meta title="正则表达式名称解析：" description=""> </a-card-meta>
        <br />
        <hr />
    </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import CodeBox from '@/components/CodeBox.vue';
@Component({
    components: {
        CodeBox,
    },
})
export default class BrushProblem extends Vue {
    private result: any;
}
</script>
<style lang="less" scoped>
.left {
    display: flex;
    flex-direction: column;
    width: 50%;
    strong {
        em {
            font-size: 1.2rem;
            color: goldenrod;
        }
    }
}
.right {
    position: relative;
    padding-left: 1rem;
    letter-spacing: 0.15rem;
    width: 50%;
    :before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 100%;
        background: #54b689;
        position: absolute;
        left: 0;
        top: 0;
    }
    textarea {
        display: flex;
        flex-direction: column;
        font-size: 1.1rem;
        color: #54b689;
    }
}
</style>
